<template>
  <div class="hd bg-white" style="height:400px;">
    <div class="result result-voctory" v-if="result==='victory'">
      <div class="icon">
        <i class="iconfont icon-success1"></i>
        <p>支付成功</p>
      </div>
      <div class="text">
        请到
        <router-link to="/cloud/appoint_history">我的预约</router-link>
        查看预约详情
      </div>
    </div>
    <div class="result result-defeat" v-else>
      <div class="icon">
        <i class="iconfont icon-shibai"></i>
        <p>支付失败</p>
      </div>
      <div class="text">
        支付二维码已经失效,请
        <router-link to="/cloud/pay">重新支付</router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        result: this.$route.query.result
      }
    },
    mounted () {
      setTimeout(() => { this.$router.replace('/cloud/appoint_history') }, 2000)
    }
  }
</script>
<style lang="less">
  .result {
    padding: 100px;
    text-align: center;
    &.result-voctory .icon {
      .iconfont {
        font-size: 6em;
        color: green;
        display: block;
      }
      p {
        color: green;
        font-size: 2em;
      }
    }
    &.result-defeat .icon {
      .iconfont {
        font-size: 6em;
        color: red;
        display: block;
      }
      p {
        color: red;
        font-size: 2em;
      }

    }
  }
</style>

